<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝切换</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        img {
            width: 100px;
            height: 100px;
        }
        
        li {
            position: absolute;
            list-style: none;
            display: inline-block;
            float: left;
        }
        
        #box {
            width: 400px;
            height: 120px;
            line-height: 120px;
            border: 1px solid black;
            position: relative;
            margin: 250px auto;
            overflow: hidden;
        }
        
        ul {
            margin-top: 10px;
            width: 420px;
            position: relative;
            height: 120px;
            line-height: 120px;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul id="father">
            <li>
                <img src="images/1576555085-aJjSPZCfVI.jpeg">
            </li>
            <li>
                <img src="../images/27679dad9ea2a00d.jpg" alt="">
            </li>
            <li>
                <img src="images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg" alt="">
            </li>
            <li>
                <img src="../images/8a05ba5bf343f553.jpg" alt="">
            </li>

        </ul>
    </div>
</body>
<script>
    var li = document.getElementsByTagName('li');
    var ul = document.getElementById('father');
    ul.innerHTML += ul.innerHTML;

    for (var i = 0; i < li.length; i++) {
        li[i].style.left = i * 100 + 'px';
    }
    var i = 0;
    console.log(li.length);
    var time = setInterval(function() {
        ul.style.left = (i--) + 'px';
        if (ul.offsetLeft == (li.length / 2 * -100)) {
            ul.style.left = 0 + 'px';
            i = 0;
        }
    }, 18);
</script>

</html>